<script setup>
import logo from "../../assets/logo.png";
import {
  ref,
  getCurrentInstance,
  defineAsyncComponent,
  watch,
  onMounted,
} from "vue";
import people from "../../assets/people.jpg";
import axios from "axios";

const rows = ref([]);
const depInfo = ref([]);
const countInfo = ref([
  {
    searchInfo: "",
    countD: 0,
    count7: 0,
    count30: 0,
  },
]);

const pageSize = ref(9);
const total = ref(0);
const searchItems = ref({
  currentPage: "1",
  type: "count7",
  depId: "",
  employName: "",
});
const currentDetail = ref([]);
const showDetail = ref(false);
const AsyncDetailDialog = defineAsyncComponent(() => import("./detail.vue"));

watch(showDetail, () => {});

// !使用全局变量
const { proxy } = getCurrentInstance();
const BASE_URL = proxy.BASE_URL;
const api = BASE_URL + "?controller=Main&action=GetEmpInfo";

const getRows = async () => {
  const { data } = await axios.post(api, {
    currentPage: searchItems.value.currentPage,
    type: searchItems.value.type,
    employName: searchItems.value.employName,
    depId: searchItems.value.depId,
  });
  console.log(data);
  rows.value = data?.rows;
  pageSize.value = data?.pageSize;
  total.value = data?.total;
  depInfo.value = data?.depInfo;
  countInfo.value = data?.countInfo;
};

const handleSearch = () => {
  getRows();
};
const handleCurrentChange = (val) => {
  searchItems.value.currentPage = val;
  getRows();
};
const handleDep = (depId) => {
  if (depId == 0) {
    searchItems.value.type = "";
    searchItems.value.employName = "";
  }
  searchItems.value.depId = depId;
  getRows();
};
const handleType = function (type) {
  searchItems.value.type = type;
  getRows();
};
const handleDetail = function (detail) {
  currentDetail.value = detail;
  showDetail.value = true;
};

//直接获取
onMounted(async () => {
  getRows();
});
</script>

<template>
  <div class="h-full relative flex flex-col">
    <!-- head -->
    <header class="bg-gray-500 header">
      <div class="flex justify-between items-center text-gray-100">
        <div class="p-2">
          <img :src="logo" class="h-16" />
        </div>
        <!-- 项目名称 -->
        <el-badge value="V1.0" class="item" type="info">
          <div class="text-5xl font-bold threed">东晖人事档案看板</div>
        </el-badge>

        <!-- right:导航按钮 -->
        <div class="flex gap-4">
          <!-- 通知 -->
        </div>
      </div>
    </header>
    <!-- body -->
    <main class="main-form flex-grow bg-gray-300 flex" ref="refMain">
      <!-- left -->
      <div
        class="bg-gradient-to-br from-gray-200 to-gray-300 p-4 flex flex-col gap-0.5"
        style="width: 400px"
      >
        <!-- 标题 -->
        <div
          class="flex justify-between items-center bg-gray-800 p-2 text-gray-400"
        >
          <div class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              class="w-8 h-8"
              viewBox="0 0 24 24"
            >
              <path
                fill="currentColor"
                d="M6.25 3.5A1.75 1.75 0 0 0 4.5 5.25v2.5c0 .966.784 1.75 1.75 1.75h2.5a1.75 1.75 0 0 0 1.75-1.75v-2.5A1.75 1.75 0 0 0 8.75 3.5zm7.25 1.75v2.5c0 .966.784 1.75 1.75 1.75h2.5a1.75 1.75 0 0 0 1.75-1.75v-2.5a1.75 1.75 0 0 0-1.75-1.75h-2.5a1.75 1.75 0 0 0-1.75 1.75M15.25 5h2.5a.25.25 0 0 1 .25.25v2.5a.25.25 0 0 1-.25.25h-2.5a.25.25 0 0 1-.25-.25v-2.5a.25.25 0 0 1 .25-.25M6.5 11.5a4.5 4.5 0 1 0 0 9h5.232a6.47 6.47 0 0 1-.721-3.373a1.5 1.5 0 0 1 .708-2.601a6.53 6.53 0 0 1 3.277-3.026zm.5 6a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m16 0a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0m-2.146-2.354a.5.5 0 0 0-.708 0L16.5 18.793l-1.646-1.647a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708"
              />
            </svg>
            <span class="font-bold text-xl">人事总览</span>
          </div>
          <div @click="handleDep(0)">共 {{ countInfo.countD }} 人</div>
        </div>

        <!-- 部门列表 -->
        <div class="h-0 flex-grow border border-gray-500">
          <div class="bg-gray-500 text-gray-200 shadow-lg flex flex-col h-full">
            <el-scrollbar>
              <template v-for="(item, index) in depInfo" :key="index">
                <el-divider />
                <div
                  class="flex justify-between p-2 bg-gray-700"
                  @click="handleDep(item.depId)"
                  v-if="searchItems.depId == item.depId"
                >
                  <span class="text-gray-300">- {{ item.depName }}</span>
                  <span class="font-bold text-lg">{{ item.cnt }} 人</span>
                </div>
                <div
                  class="flex justify-between p-2"
                  @click="handleDep(item.depId)"
                  v-else
                >
                  <span class="text-gray-300">- {{ item.depName }}</span>
                  <span class="font-bold text-lg">{{ item.cnt }} 人</span>
                </div></template
              >
            </el-scrollbar>
          </div>
        </div>

        <!-- 筛选区域 -->
        <div class="bg-gray-300 mt-4">
          <el-input
            placeholder="员工关键字"
            size="large"
            v-model="searchItems.employName"
          >
            <template #suffix>
              <el-icon class="cursor-pointer" @click="handleSearch"
                ><search
              /></el-icon>
            </template>
          </el-input>
        </div>

        <!-- 统计信息 -->
        <div class="mt-4 grid grid-cols-2">
          <div
            class="m-auto w-40 h-40 border bg-blue-900 text-white rounded-lg shadow-lg flex relative"
            @click="handleType('count7')"
          >
            <div class="p-2 absolute">近7日新人</div>
            <div class="text-5xl font-bold m-auto">{{ countInfo.count7 }}</div>
          </div>
          <div
            class="m-auto w-40 h-40 border text-blue-900 border-blue-900 rounded-lg shadow-lg flex relative"
            @click="handleType('count30')"
          >
            <div class="p-2 absolute">近30日新人</div>
            <div class="text-5xl font-bold m-auto">{{ countInfo.count30 }}</div>
          </div>
        </div>
      </div>

      <!-- right -->
      <div class="w-0 flex-grow h-full p-4 flex flex-col">
        <div
          class="border border-gray-400 w-full h-auto mb-3 flex p-2"
          v-if="countInfo.searchInfo"
        >
          {{ countInfo.searchInfo }}
        </div>
        <div class="h-0 flex-grow flex flex-col">
          <el-scrollbar>
            <div class="grid grid-cols-3 gap-4">
              <div
                v-for="(item, index) in rows"
                class="card"
                @click="handleDetail(item)"
              >
                <img
                  :src="item.picName"
                  class="rounded-lg"
                  v-if="item.picName"
                  style="width: 198px; height: 198px"
                />
                <img :src="people" class="rounded-lg" v-else />
                <div class="w-0 flex-grow p-2 flex flex-col">
                  <!-- 姓名电话 -->
                  <div class="flex justify-between items-center text-gray-600">
                    <span class="font-bold text-2xl">{{
                      item.employName
                    }}</span>
                    <div class="flex gap-2">
                      <PhoneFilled class="w-5 h-5"></PhoneFilled
                      >{{ item.mobile }}
                    </div>
                  </div>
                  <!-- 其他信息 -->
                  <div class="pt-2 flex-grow grid grid-cols-2 text-gray-500">
                    <div>性别：{{ item.sexName }}</div>
                    <div>政治面貌：{{ item.political }}</div>
                    <div>民族：{{ item.nation }}</div>
                    <div>婚姻情况：{{ item.married }}</div>
                    <div>年龄：{{ item.age }}</div>
                    <div>文化程度：{{ item.education }}</div>
                    <div class="col-span-2">入职时间：{{ item.dateEnter }}</div>
                    <div class="col-span-2">出生日期：{{ item.birthday }}</div>
                    <div class="col-span-2">籍贯：{{ item.residence }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn-group mt-8 r-0">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </main>

    <!-- dialog -->
    <Suspense v-if="showDetail"
      ><AsyncDetailDialog
        v-model:visible="showDetail"
        v-model:currentDetail="currentDetail"
    /></Suspense>
  </div>
</template>

<style scoped lang="scss">
.card {
  @apply border border-gray-400 w-full h-auto m-auto flex p-2;
}
:deep(.el-divider--horizontal) {
  --el-border-color: #888;
  margin: 0px;
}
/* 3d文字 */
.threed {
  @apply text-gray-400;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
    0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
    0px 8px 7px #001135;
}

/* 鼠标以上变大 */
.bigger {
  @apply transform transition-all hover:scale-110;
}

.main-form {
  :deep(.el-input__wrapper) {
    --el-input-border-color: rgba(188, 188, 188, 1);
    --el-border-color: rgba(188, 188, 188, 1);
    @apply bg-transparent;
  }

  :deep(.el-table) {
    --el-bg-color: rgba(100, 100, 100, 0);
    --el-fill-color-blank: rgba(100, 100, 100, 0);
    --el-table-border: 1px solid rgba(188, 188, 188, 0.75);
    --el-border-color-lighter: rgba(188, 188, 188, 0.75);
    --el-fill-color-light: rgba(188, 188, 188, 0.3);
  }
}
</style>
